<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="https://cdn.jsdelivr.net/npm/heyui"></script>
    <link rel="stylesheet" href="/scripts/heyui/css/heyui.blue.theme.css">
    <link rel="stylesheet" href="/styles/global.css">
</head>

<body>
    <div id="app">
        <div class="page-body">
            <div class="page-title">
                <h-row>
                    <h-cell width="12">
                        <h5 class="page-title-text">用户列表</h5>
                    </h-cell>
                    <h-cell width="12">
                        <div class="float-right">
                            <h-button icon="h-icon-refresh" v-tooltip placement="left" content="刷新当前页面"></h-button>
                        </div>
                    </h-cell>
                </h-row>
            </div>
            <div class="page-search-view">
                <h-form mode="threecolumn" label-position="left">
                    <h-form-item label="用户名称">
                        <input type="text" placeholder="只能输入15，限制输入30个字" />
                    </h-form-item>
                    <h-form-item label="用户名称">
                        <input type="text" placeholder="只能输入15，限制输入30个字" />
                    </h-form-item>
                    <h-form-item label="用户名称">
                        <input type="text" placeholder="只能输入15，限制输入30个字" />
                    </h-form-item>
                    <h-form-item label="用户名称">
                        <input type="text" placeholder="只能输入15，限制输入30个字" />
                    </h-form-item>
                    <h-form-item label="用户名称">
                        <input type="text" placeholder="只能输入15，限制输入30个字" />
                    </h-form-item>
                </h-form>
            </div>
            <div class="page-search-btns">
                <h-button class="h-btn" icon="h-icon-inbox">导出</h-button>
                <h-button class="h-btn h-btn-primary" icon="h-icon-search"><span>查询</span></h-button>
                <h-button class="h-btn h-btn-green" icon="h-icon-outbox"><span>上传</span></h-button>
                <h-button class="h-btn h-btn-yellow" icon="h-icon-refresh"><span>刷新</span></h-button>
                <h-button class="h-btn h-btn-red" icon="h-icon-refresh" @click="onDelete"><span>删除</span></h-button>
            </div>
            <div class="page-data-view">
                <div class="page-data">
                    <h-table :datas="list" checkbox ref="table">
                        <h-table-item title="名称" prop="name"></h-table-item>
                        <h-table-item>
                            <template v-slot="{data}">
                                <span v-if="data.age>=17" class="h-tag h-tag-bg-red">{{data.age}}</span>
                                <span v-else class="h-tag h-tag-bg-primary">{{data.age}}</span>
                            </template>
                        </h-table-item>
                        <div slot="empty">暂时无数据</div>
                    </h-table>
                </div>
                <div class="page-data-page">
                    <h-pagination v-model="pagination" @change="onPageChange"></h-pagination>
                </div>
            </div>

        </div>
    </div>
</body>

</html>
<script>
    new Vue({
        el: "#app",
        data: {
            list: [],
            columns: [{
                title: '名称',
                prop: 'name'
            }, {
                title: '年龄',
                prop: 'age'
            }, {
                title: '地址',
                prop: 'address',
                render: function (data, row, index) {
                    // console.log(data);
                    console.log(data);
                    return `<span class="h-tag h-tag-bg-red">${data.address}</span>`;
                }
            }],
            pagination: {
                page: 1,
                size: 10,
                total: 100
            },
            queryData: {
                name: "姓",
                age: 12
            }
        },
        methods: {
            onLoadData: function () {
                var data = [];
                for (let index = 0; index < 20; index++) {
                    data.push({
                        id: index,
                        name: '测试$$===' + index,
                        age: index,
                        address: '上海'
                    });
                }
                this.list = data;

                this.$http.post("", {}, function (data) {

                })

            },
            onPageChange: function (value) {
                this.onLoadData();
            },
            onDelete() {
                // SysMenu/PageListData
                var ids = this.$refs.table.getSelection().map(x => x.id);
                console.log(ids);
            }
        },
        mounted: function () {
            // this.$Confirm('确定删除？', '自定义title').then(() => {
            //     this.$Message.success('确定删除！');
            // });
            this.onLoadData();
        },
    })
</script>